<template>
  <div class="titleList">
    <div class="goodsTilte" style=" vertical-align: top;">
      <span class="require">*</span>产品颜色：
      <div class="textC marT">(最多添加40个)</div>
    </div>
    <!-- 循环获取颜色 -->
    <div class="titleDetail">
      <div class="checkItem" v-for="(item, index) in colorList" :key="index">
        <w-radio name="color" :label="item.specpropertyName" v-model="specpropertyBindName" @on-radio="emitToParent">
          <span class="color-group">
            <span class="color-box" :style="{'background-color': `${item.colorCode}`}" v-if="!item.isDel"></span> {{item.specpropertyName}}
          </span>
        </w-radio>
        <i class="u-sku-del" v-if="item.isDel" @click="colorList.splice(index, 1)"></i>
      </div>
      <!-- 其他 -->
      <div class="addNewOther">
        <div class="addNewC" v-show="!showInput" @click="showInput = true">
          <img src="../../../assets/addInfo/btn_add.png" alt="" class="addBtnP">
          <span>其他</span>
        </div>
        <!-- 新增显示输入框 -->
        <div class="addNewC" v-show="showInput">
          <w-input holder="颜色名称" rule="isGoodsName" error="请输入中文，字母，数字或其组合" v-model="specpropertyName"></w-input>
          <button class="btn btnAdd" type="button" @click="addNewColor">提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: Array
  },
  data() {
    return {
      // 是否展示颜色输入框
      showInput: false,
      // 颜色尺码
      colorList: [],
      // 颜色
      specpropertyName: '',
      specpropertyBindName: ''
    }
  },
  created() {
    this.colorList = this.list
    if (this.$route.query.sketchid) {
      this.specpropertyName = this.colorList[0].specpropertyName
    }
  },
  methods: {
    addNewColor() {
      // 如果没有输入颜色，则直接抛出
      if (!this.specpropertyName) {
        this.$toast('请输入颜色')
        return
      }
      let isInList = this.colorList.filter(v => {
        return v.specpropertyName == this.specpropertyName
      })
      // 如果当前输入的颜色，已经输入过
      if (isInList.length > 0) {
        this.$toast('此颜色已经在列表中，请重新换一种颜色')
        return
      }
      this.colorList.push({
        specpropertyName: this.specpropertyName,
        isDel: true
      })
      this.specpropertyName = ''
      this.showInput = false
    },
    /**
     * 将点击的结果通知给父组件
     */
    emitToParent() {
      this.colorList.forEach(v => {
        if (v.specpropertyName == this.specpropertyBindName) {
          this.$emit('select', v)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.titleList {
  .color-group {
    display: inline-block;
    float: right;
    line-height: 18px;

    .color-box {
      border: 1px solid #d9d7d7;
      display: inline-block;
      width: 10px;
      height: 10px;
    }
  }
}
</style>